<!--
 * @Description: 用户管理
 * @Author: zhihong deng
 * @Date: 2021-08-23 21:31:35
 * @LastEditors: zhihong deng
 * @LastEditTime: 2021-10-07 20:27:53
-->
<template>
  <div class="user-manage">
    <!-- 条件查询 -->
    <div class="query-form">
      <el-form :inline="true" ref="form" :model="queryForm" label-width="80px">
        <el-form-item label="审批状态" prop="applyState">
          <el-select v-model="queryForm.applyState" placeholder="请选择">
            <el-option value =" " label = "全部"></el-option>
            <el-option :value ="1" label = "待审批"></el-option>
            <el-option :value ="2" label = "审批中"></el-option>
            <el-option :value ="3" label = "审批拒绝"></el-option>
            <el-option :value ="4" label = "审批通过"></el-option>
            <el-option :value ="5" label = "作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApplyList">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleApply">申请休假</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="applyList">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          :formatter="item.formatter">
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.row)"
            >查看</el-button
            >
            <el-button
              type="danger"
              size="mini"
              v-if="[1, 2].includes(scope.row.applyState)"
              @click="handleDelete(scope.row._id)"
            >作废</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!-- 申请休假弹框 -->
      <el-dialog
        title="休假申请"
        v-model="showModal"
        width="70%"
        :before-close="dialogBeforeClose">
        <el-form
          ref="dialogForm"
          :model="leaveForm"
          label-width="120px"
          :rules="rules"
        >
          <el-form-item label="休假类型" prop="applyType">
            <el-select v-model="leaveForm.applyType" placeholder="请选择">
              <el-option label="事假" :value="1"></el-option>
              <el-option label="调休" :value="2"></el-option>
              <el-option label="年假" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="休假时间">
            <el-row>
              <el-col :span="8">
                <el-form-item prop="startTime" required >
                  <el-date-picker
                    v-model="leaveForm.startTime"
                    type="date"
                    placeholder="选择开始日期"
                    @change="(val)=>handleDateChange('startTime', val)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="1">-</el-col>
              <el-col :span="8">
                <el-form-item prop="endTime" required >
                  <el-date-picker
                    v-model="leaveForm.endTime"
                    type="date"
                    placeholder="选择结束日期"
                    @change="(val)=>handleDateChange('endTime', val)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="leaveTime" label="休假时长" required >
            {{ leaveForm.leaveTime }}
          </el-form-item>
          <el-form-item label="休假原因" prop="reasons">
            <el-input
              type="textarea"
              :row="3"
              placeholder="请输入休假原因"
              v-model="leaveForm.reasons"
              />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <!-- 查看详情弹框 -->
      <el-dialog
        title="申请休假详情"
        v-model="showDetailModal"
        width="50%"
        destroy-on-close
        :before-close="dialogBeforeClose">
        <el-steps
          :active="detail.applyState > 2 ? 3 : detail.applyState"
          align-center
        >
          <el-step title="待审批"></el-step>
          <el-step title="审批中"></el-step>
          <el-step title="审批通过/审批拒绝"></el-step>
        </el-steps>
        <el-form label-width="120px" label-suffix=":">
          <el-form-item label="休假类型">
            <div>{{detail.applyTypeName}}</div>
          </el-form-item>
          <el-form-item label="休假时间">
            <div>{{detail.time}}</div>
          </el-form-item>
          <el-form-item label="休假时长">
            <div>{{detail.leaveTime}}</div>
          </el-form-item>
          <el-form-item label="休假原因">
            <div>{{detail.reasons}}</div>
          </el-form-item>
          <el-form-item label="审批人">
            <div>{{detail.curAuditUserName}}</div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
import utils from '../utils/utils'
export default {
  name: "user",
  setup() {
    // 获取Composition API 上下文对象
    const { proxy } = getCurrentInstance();
    const queryForm = reactive({
      applyState: 1
    });
    // 申请列表
    const applyList = ref([]);
    // 初始化分页对象
    const pager = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0
    });
    // 定义动态表格-格式
    const columns = reactive([
        {
        label: '单号',
        prop: 'orderNo'
        },
        {
          label: '休假时间',
          prop: '',
          formatter(row) {
            return (
              utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd')
              + "到" +
              utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
              );
          }
        },
        {
          label: '休假时长',
          prop: 'leaveTime'
        },
        {
          label: '休假类型',
          prop: 'applyType',
          formatter(row, column, value){
            return {
              1: '事假',
              2: '调休',
              3: '年假'
            }[value]
          }
        },
        {
          label: '休假原因',
          prop: 'reasons'
        },
        {
          label: '申请时间',
          prop: 'createTime',
          width: 180,
          formatter: (row, column, value) => {
            return utils.formateDate(new Date(value));
          },
        },
        {
          label: '审批人',
          prop: 'auditUsers'
        },
        {
          label: '当前审批人',
          prop: 'curAuditUserName'
        },
        {
          label: '审批类型',
          prop: 'applyState',
          formatter(row, column, value){
            return {
              1: '待审批',
              2: '审批中',
              3: '审批拒绝',
              4: '审批通过',
              5: '作废'
            }[value]
          }
        }
      ]);
    // 申请休假弹框
    const leaveForm = reactive({
      applyType: 1,
      startTime: '',
      endTime: '',
      leaveTime: '0天',
      reasons: ''
    })
    // 表单校验规则
    const rules = reactive({
      startTime:[{type: "date", required: true, message: "请输入开始日期", trigger: "change"}],
      endTime:[{type: "date", required: true, message: "请输入结束日期", trigger: "change"}],
      reasons:[{ required: true, message: "请输入休假原因", trigger: ["change", "blur"] }],
    })
    const showModal = ref(false)
    const showDetailModal = ref(false)
    // create:创建  delete:作废
    const action = ref("create")
    // const定义的是常量，不能修改赋值
    let detail = ref({})
    // 初始化接口调用
    onMounted(() => {
      getApplyList();
    });
    // 加载申请列表
    const getApplyList = async () => {
      let params = {...queryForm, ...pager};
      let {list, page} = await proxy.$api.getApplyList(params);
      applyList.value = list;
      pager.total = page.total;
    }
    // 重置查询表单
    const handleReset = (form) => {
      proxy.$refs[form].resetFields();
    };
    // 分页事件处理
    const handleCurrentChange = (current) => {
      pager.pageNum = current;
      getUserList();
    };
    // 点击申请休假-展示弹框
    const handleApply = () => {
      showModal.value = true
      action.value = "create"
    }
    // 取消申请
    const handleClose = () => {
      showModal.value = false
      handleReset('dialogForm')
    }
    // 计算休假时长
    const handleDateChange = (key, val) => {
      let { startTime, endTime } = leaveForm;
      if (!startTime || !endTime) return;
      if (startTime > endTime) {
        proxy.$message.error("开始日期不能晚于结束日期");
        leaveForm.leaveTime = "0天"
        setTimeout (() => {
          leaveForm[key] = "";
        }, 0)
      }else{
        leaveForm.leaveTime = ((endTime - startTime) / (24*60*60*1000) + 1) + '天'
      }
    }
    // 提交申请
    const handleSubmit = () => {
      // 提交表单前先校验
      proxy.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          try {
            let params = { ...leaveForm, action: action.value };
            let res = await proxy.$api.leaveOperate(params);
            proxy.$message.success("创建成功");
            handleClose();
            getApplyList();
          } catch (error) {}
        }
      });
    }
    // 查看
    const handleDetail = (row) => {
      let data = { ...row };
      // "applyType":1,//申请类型  1:事假 2：调休 3:年假
      data.applyTypeName = {
        1: "事假",
        2: "调休",
        3: "年假",
      }[data.applyType];
      data.time = 
        utils.formateDate(new Date(data.startTime), "yyyy-MM-dd") + 
        "到" + 
        utils.formateDate(new Date(data.endTime), "yyyy-MM-dd");
      // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
      data.applyStateName = {
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废"
      }[data.applyState]
      detail.value = data;
      showDetailModal.value = true;
    }
    // 作废
    const handleDelete = async (_id) => {
      try {
        let params = { _id, action: "delete" };
        let res = await proxy.$api.leaveOperate(params);
        proxy.$message.success("删除成功");
        getApplyList();
      } catch (error) {}
    }
    return {
      queryForm,
      columns,
      pager,
      handleReset,
      handleCurrentChange,
      getApplyList,
      applyList,
      leaveForm,
      showModal,
      handleApply,
      action,
      handleClose,
      handleSubmit,
      rules,
      handleDateChange,
      showDetailModal,
      detail,
      handleDetail,
      handleDelete
    };
  },
};
</script>

<style lang="scss">
</style>